<template>
    <childLayout activeType="aboutUs" :asidebarList="aboutUsList" @changeActive="changeActive">
        <div class="child-content">
            <div class="content-title">{{queryTitle}}</div>
            <div class="content-desc" v-html="contentInfo"></div>
        </div>
    </childLayout>
</template>

<script setup>
    import childLayout from "@/layout/childLayout";
    import { getCmsContent, getAboutUsList } from '@/api/common'

    const route = useRoute()

    const contentInfo = ref({})
    const aboutUsList = ref([])
    const queryTitle = ref('')

    const getContent = async () => {
        const result = await getCmsContent({
            title: queryTitle.value
        })
        contentInfo.value = result.data.cmsContent
    }

    const toGetAboutUslist = async () => {
        const result = await getAboutUsList()
        if(result) {
            let list = result.data
            list.forEach(item => {
                item.name = item.cmsClassName
            })
            aboutUsList.value = list

            queryTitle.value = list[0].name
            getContent()
        }
    }

    const changeActive = (item) => {
        queryTitle.value = item.name
        getContent()
    }

    onMounted(() => {
        toGetAboutUslist()
    })

</script>

<style lang="scss" scoped>
.content-title {
    color: rgba(5, 11, 32, 1);
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 24px;
    text-align: center;
}

.content-desc {
    color: rgba(94, 94, 94, 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
}
</style>